/**
 * 用户列表信息
 */
import React, { Component } from 'react'
import { Avatar, Input, Image } from 'antd'
import './user.css'
import CheckedUser from './checkedUser'
import storage from '../../Utils/storage'
import $http from '../../Utils/request'

//创建请求头文件
let config = {}
if(storage.get("token") !== null){
  config = {
    headers:
      {'Content-Type': 'application/json',
        'token':storage.get("token").data
      }
  }
}else{
  config = {
    headers:
      {'Content-Type': 'application/json'
      }
  }
}

const { Search } = Input;
export default class UserTable extends Component {
  //声明变量
  state = {
    dataSource : [],
    userData : [],
    columns:[
      {
        title: '序号',
        align: 'center',
        dataIndex:'index',
        render(data, record, index) {
          return `${index + 1}`
        }
      },
      {
        title: '用户头像',
        dataIndex: 'headPortraitUrl',
        align: 'center',
        key: 'headPortraitUrl',
        render:function (text){
          return (
            <Avatar size={80}
              src={
                <Image
                  fallback=""
                  src={text}
                  style={{width:80,height:80}}/>
              }
            />
          )
        }
      },
      {
        title: '登录账号',
        dataIndex: 'username',
        align:'center',
        key: 'username',
        editable: true,
      },
      {
        title: '昵称',
        dataIndex: 'nickname',
        align:'center',
        key: 'nickname',
        editable: true,
      },
      {
        title: '状态',
        dataIndex: 'state',
        align:'center',
        key: 'state',
        render:function(text){// 用户状态  0 待审核 1 启用 2 禁用 3 冻结
          if(text=== 0){
            return <span style={{backgroundColor:'#9ec5ff'}}>待审核</span>
          }else if(text=== 1){
            return <span style={{backgroundColor:'#3ed68f'}}>启用</span>
          }else if(text=== 2){
            return <span style={{backgroundColor:'#dc3545'}}>禁用</span>
          }else if(text=== 3){
            return <span style={{backgroundColor:'#ffc107'}}>冻结</span>
          }
        }
      },
      {
        title: '用户类型',
        dataIndex: 'type',
        align:'center',
        key: 'type',
        render:function (text){// 用户类型 1 采购人 2 供应者 3 管理员
          if(text === 1){
            return <span style={{backgroundColor:'#9ec5ff'}}>采购人</span>
          }else if(text === 2){
            return <span style={{backgroundColor:'#3ed68f'}}>供应者</span>
          }else if(text === 3){
            return <span style={{backgroundColor:'#dc3545'}}>管理员</span>
          }
        }
      },
      {
        title: '审核状态',
        dataIndex: 'auditstate',
        align:'center',
        key: 'auditstate',
        render:function (text) { //审核状态 0 待审核 1 审核通过 2 审核不通过 3 驳回
          if(text=== 0){
            return <span style={{backgroundColor:'#9ec5ff'}}>待审核</span>
          }else if(text=== 1){
            return <span style={{backgroundColor:'#3ed68f'}}>审核通过</span>
          }else if(text=== 2){
            return <span style={{backgroundColor:'#dc3545'}}>审核不通过</span>
          }else if(text=== 3){
            return <span style={{backgroundColor:'#ffc107'}}>驳回</span>
          }
        }
      },
      {
        title: '审核时间',
        dataIndex: 'audittime',
        align:'center',
        key: 'audittime',
      },
      {
        title: '联系方式',
        dataIndex: 'phone',
        align:'center',
        key: 'phone',
        editable: true,
      },
      {
        title: '创建时间',
        dataIndex: 'createtime',
        align:'center',
        key: 'createtime',
      }
    ]
  }

  //页面加载是进入该函数
  componentDidMount () {
    $http.get("http://localhost/mall-basic-service/basic/user/queryBasicUserAll",config).then((response)=>{
      //定义接收数组
      let data = [];
      if(response.data.code === 0 ){
        for (let i = 0; i < response.data.data.length; i++) {
          data.push(response.data.data[i])
        }
      }
      //数据重组
      this.setState({
        dataSource : data,
        userData : data
      })
    })
  }

  /**
   * 查询方法
   * @param value
   */
  onSearch = (value) => {
    //获取列表数据
    let userList = this.state.dataSource;
    debugger;
    //保存原始数据
    let userData = this.state.userData;
    //定义一个新的集合用于存放新的数据
    let userListNew = [];
    if(value.trim() !== null && value.trim() !== ""){
      for(let i = 0 ; i < userList.length ; i ++ ){
        if(userList[i].username.match(value)||
          userList[i].nickname.match(value)) {
          userListNew.push(userList[i])
        }
      }
    }else{
      userListNew = userData
    }
    //重组数据
    this.setState({
      dataSource:userListNew,
    })
  }

  render () {
    return (
      <div className="bodyDiv" style={{width:1150}}>
        {/*引入列表*/}
        <CheckedUser columns={this.state.columns} dataSource={this.state.dataSource} />
        {/*搜索框*/}
        <div className="userSearchDiv">
          <Search
            placeholder="请输入用户名称"
            onSearch={this.onSearch}
            style={{
              width: 200,
            }}
          />
        </div>

      </div>

    )
  }
}
